<template>
  <p>
    <button @click="refresh">
      <i class="ace-icon fa fa-undo"></i>
      刷新
    </button>
  </p>
  <table id="simple-table" class="table  table-bordered table-hover">
    <thead>
      <tr>
          <th>id</th>
          <th>手机号</th>
          <th>验证码</th>
          <th>用途</th>
          <th>生成时间</th>
          <th>用途</th>
      </tr>
    </thead>

    <tbody>
    <tr v-for="sms in smss" :key="sms.id">
          <td>{{ sms.id }}</td>
          <td>{{ sms.mobile }}</td>
          <td>{{ sms.code }}</td>
          <td>{{ optionKV(SMS_USE_REF, sms.use) }}</td>
          <td>{{ sms.at }}</td>
          <td>{{ optionKV(SMS_STATUS_REF, sms.status) }}</td>
    </tr>
    </tbody>
  </table>
  <!-- 分页插件 -->
  <pagination ref="paginationRef" :list="getSmsList" />
</template>

<script>
import axios from "axios";
import {onMounted, ref} from "vue";
import pagination from "@/components/pagination";
import Filter from "@/filter/filter"

export default {
  name: "Sms",
  components: {
    pagination,
  },
  setup() {
    // smss 数组
    const smss = ref([]);
    const sms = ref({}); // 保存短信验证码表单
    const paginationRef = ref(null);

    // 枚举字段
    const SMS_USE_REF = ref();
    const SMS_STATUS_REF = ref();

    // 刷新
    const refresh = () => {
      getSmsList(1);
    }

    // 获取短信验证码列表
    const getSmsList = (page) => {
      Loading.show();
      axios.post(process.env.VUE_APP_SERVER + "/business/admin/sms/list",
          {
            page: page,
            size: paginationRef.value.size
          }
      ).then((response) => {
        Loading.hide();
        const resp = response.data;
        smss.value = resp.content.list;
        paginationRef.value.render(page, resp.content.total);
      })
    }

    // 渲染收费字段 收费 状态 级别
    const optionKV = (object, key) => {
      return Filter.optionKV(object, key);
    }

    // 初始加载第一页
    onMounted(() => {
      getSmsList(1);
      SMS_USE_REF.value = SMS_USE;
      SMS_STATUS_REF.value = SMS_STATUS;
    })

    return {
      smss,
      refresh,
      paginationRef,
      getSmsList,
      sms,
      SMS_USE_REF,
      SMS_STATUS_REF,
      optionKV,
    }
  }
}
</script>

<style scoped>

</style>